<!--
  路由链接组件
  用于处理内部和外部链接的统一组件
  Props:
    - to: 链接目标，可以是路由路径或外部URL
    - target: 链接打开方式，默认为_blank(外部链接)或undefined(内部链接)
-->
<template>
  <component :is="linkType" v-bind="linkProps" v-on="$listeners">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'Link',
  props: {
    to: {
      type: String,
      required: true
    },
    target: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 判断是否为外部链接
    isExternal() {
      return isExternal(this.to)
    },
    // 确定使用的组件类型
    linkType() {
      return this.isExternal ? 'a' : 'router-link'
    },
    // 根据链接类型返回对应的props
    linkProps() {
      if (this.isExternal) {
        return {
          href: this.to,
          target: this.target || '_blank',
          rel: 'noopener'
        }
      }
      return {
        to: this.to
      }
    }
  }
}
</script> 